<template>
  <!-- 注册登录弹窗 -->
  <transition name="el-fade-in-linear">
    <div v-show="msgShow" :class="'transition-box ' + msgColor">{{ bandingMsg }}</div>
  </transition>
  <!-- 判断是否登录弹窗 -->
  <div class="blackBox" v-show="check"></div>
  <div class="checkBox" v-show="check">
    <p>您已登陆，退出登录请点击退出，返回主页面请点击返回</p>
    <el-button type="primary" @click="layOut" class="checkBut">退出</el-button>
    <el-button type="primary" @click="reTurn" class="checkBut">返回</el-button>
  </div>
  <!-- 登录注册界面 -->
  <div class="container">
    <div class="box">
      <div class="pre-box" :style="{ transform: `translateX(${position}%)` }">
        <h1>Welcome!</h1>
        <p>JOIN US!</p>
        <div class="img-box">
          <LottieAnimation :animation-data="animationData" :auto-play="true" :loop="true"
            style="width: 200px; height: 200px;" />
        </div>
      </div>
      <!-- 注册盒子 -->
      <div class="register-container">
        <div class="register-box" v-show="true">
          <div class="register-title">
            <h1>注册</h1>
          </div>

          <div class="register-form">
            <el-input v-model="username" placeholder="请输入账号" id="register-account" class="register-account" required />
            <el-input type="password" v-model="password" placeholder="请输入密码" id="register-password"
              class="register-password" show-password required />
            <el-input type="password" v-model="confirmPassword" placeholder="请确认密码" id="register-confirmpassword"
              class="register-password" show-password required />
          </div>

          <div class="register-button">
            <el-button type="primary" id="register-btn" class="register-btn" @click="register">注册</el-button>
            <el-link class="pword" id="changeTologin" @click="SlideMove">已有账号?去登录</el-link>
          </div>
        </div>
      </div>
      <!-- 登录盒子 -->
      <div class="login-container">
        <div class="login-box" v-show="true">
          <div class="login-title">
            <h1>登录</h1>
          </div>

          <div class="login-form">
            <el-input v-model="loginUsername" placeholder="请输入账号" id="login-account" class="login-account" required />
            <el-input type="password" v-model="loginPassword" placeholder="请输入密码" id="login-password"
              class="login-password" showpassword required />
          </div>

          <div class="login-button">
            <el-button type="primary" id="login-btn" class="login-btn" @click="login">登录</el-button>
            <el-link class="pword" id="changeToregister" @click="SlideMove">没有账号?去注册</el-link>
          </div>
          <!-- 如果用户第一次登录弹出的页面，进行对用户的健康信息采集 -->
          <div class="warning">
            <el-dialog v-model="dialogShow" title="首次登录 猫大厨镔镔需要采集你的健康信息awa" width="1000" center="true">
              <InformationForm />
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="passUpdate">跳过</el-button>
                </div>
              </template>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import { LottieAnimation } from "lottie-web-vue";
import animationData from '../../assets/Animation - 1746967367807.json';
import axios from 'axios'
import { ref } from 'vue'
import { reactive } from 'vue'
import { useRouter } from 'vue-router';
import { ElMessageBox } from 'element-plus';
import InformationForm from '@/views/Main/InformationForm.vue';
//用户第一次登录手机健康信息的弹窗所用到的值与方法 
// 用户第一次登录做的判断，最开始默认false
let dialogShow = ref(false)
//跳过收集信息
async function passUpdate() {
  try {
    updateAxios = await axios({
      url: '/api/user/updateStatus',
      method: 'post',
      headers: { 'content-type': 'application/x-www-form-urlencoded' }
    })
  } catch (error) {
    console.log(error);
  }
  dialogShow.value = false
  router.push({
    path: '/layout',
  })

}


// 用户从非login页面，在没有退出的情况下进入login页面的弹窗用到的值与方法
// 判断用户是否登录，默认值为false
let check = ref(false)
// 回到login页面调用函数先进行一次判断
CheckLog()
async function CheckLog() {
  const checkL = await axios({
    url: '/api/user/checkLogin',
    method: 'post'
  })//通过后端返回的code判断是否登录
  if (checkL.data.code == 1010) {
    console.log('未登录');
  } else {
    check.value = true
    console.log('已登录');
  }
}
// 返回按钮，控制路由返回至主页面
function reTurn() {
  router.push({
    path: 'layout'
  })
}
// 退出按钮,访问后端退出接口进行退出
function layOut() {
  check.value = false
  axios({
    url: '/api/user/logout',
    method: 'post'
  })
}


// 用户注册账号所用到的方法与值
//响应式拿到账号密码，确认密码
let username = ref('')
let password = ref('')
let confirmPassword = ref('')
// axios访问后端注册接口
let registerAxios: any
async function register() {
  try {
    registerAxios = await axios({
      url: '/api/user/register',
      method: 'post',
      data: {//传对应的值
        username: username.value,
        password: password.value,
        confirmPassword: confirmPassword.value
      },
      // 记得设置好请求头
      headers: { 'content-type': 'application/x-www-form-urlencoded' }
    })
  } catch (error) {
    console.log(error);
  }
  // 通过返回的code的值判断是否注册成功
  if (registerAxios.data.code == '0') {
    showTime('注册成功', 'success')
    SlideMove()//注册成功的动画效果
  } else {
    showTime('注册失败', 'fail')
  }

}


// 用户登录所用到的方法与值
//响应式拿到账号密码
let loginUsername = ref('')
let loginPassword = ref('')
// axios访问登录接口
let loginAxios: any
let updateAxios: any
const router = useRouter()
async function login() {
  try {
    loginAxios = await axios({
      url: '/api/user/login',
      method: 'post',
      data: {
        username: loginUsername.value,
        password: loginPassword.value,
      },
      headers: { 'content-type': 'application/x-www-form-urlencoded' }
    })
  } catch (error) {
    console.log('登录报错'+error);
  }
  // 先对用户是否是第一次登录进行判断
  if (loginAxios.data.data === 2) {
    showTime('登录成功', 'success')
    console.log(loginAxios.data.data)
    dialogShow.value = true
    // console.log(loginAxios.data.data);
    

  }
  // 判断用户是否登录成功
  else if (loginAxios.data.code === 0) {
    showTime('登录成功', 'success')
    // let userId: number
    // async function getuserId() {
    //   const res = await axios({
    //     url: '/api//user/getPartUserInfo',
    //   })
    //   return res.data.data.id
    // }
    // userId = await getuserId()
    router.push({
      path: '/layout',
    })
  }
  else {
    showTime('登录失败', 'fail')
  }
}


// 登录注册后的弹幕提示
let bandingMsg = ref('')
let msgShow = ref(false)
let msgColor = ref('')
var showTimer: any//定时器
// 每当点击注册登录都会有弹窗
function showTime(msg: string, color: string) {
  msgColor.value = color
  msgShow.value = true
  bandingMsg.value = msg
  showTimer = setTimeout(() => {
    msgShow.value = false
    clearTimeout(showTimer)//设置定时器记得清空定时器
  }, 1500);
}


// 登录注册图片动画滑动
let Show = ref(true)
let position = ref(0)
function SlideMove() {
  if (Show.value) {
    position.value = 100
    Show.value = false
  } else {
    position.value = 0
    Show.value = true
  }
}


</script>



<style scoped>
.checkBox {
  z-index: 999;
  position: absolute;
  height: 40vh;
  width: 40vw;
  /* 相对于父元素移动，移动父元素宽高的50% */
  top: 50%;
  left: 50%;
  /* 相对自身移动，移动自身元素宽高-50%，来实现盒子居中 */
  transform: translate(-50%, -50%);
  background-color: #FFE8D6;
  text-align: center;
  padding: 10vh;
  border-radius: 30px;
}

.checkBut {
  margin-top: 10vh;
  width: 6vw;
}

.blackBox {
  position: absolute;
  top: 0;
  z-index: 998;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, .1);
}

* {
  /* 去除浏览器默认内外边距 */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.transition-box {
  z-index: 9;
  position: absolute;
  top: 5px;
  left: 47%;
  width: 100px;
  height: 40px;
  line-height: 40px;
  border-radius: 10px;
  color: white;
  box-shadow: 4px 4px 3px rgba(3, 104, 245, 0.1);
  text-align: center;
}


.box {
  background: linear-gradient(to left, rgb(190, 231, 214), rgb(191, 227, 241));
  width: 1050px;
  height: 600px;
  display: flex;
  position: relative;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 2px 1px 19px rgba(0, 0, 0, .1);
  margin: auto;
  margin-top: 50px;
}

.pre-box {
  /* background-color: red; */
  width: 50%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  border-radius: 4px;
  /* background-color: #1589e9; */
  box-shadow: 2px 1px 19px rgba(0, 0, 0, .1);
  height: 600px;
  transition: 0.5s ease-in-out;
  background: linear-gradient(to left, rgb(190, 231, 214), rgb(191, 227, 241));

}

.pre-box h1 {
  margin-top: 150px;
  text-align: center;
  color: white;
  user-select: none;
  text-shadow: 4px 4px 3px rgba(0, 0, 0, .1);
}

.pre-box p {
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: white;
  text-shadow: 4px 4px 3px rgba(0, 0, 0, .1);
}

.img-box {
  width: 200px;
  height: 200px;
  margin: 10px auto;
  border-radius: 50%;
  user-select: none;
  overflow: hidden;
  box-shadow: 4px 4px 3px rgba(0, 0, 0, .1);

}

.img-box img {
  width: 100%;
  height: 100%;
}

.login-container,
.register-container {
  flex: 1;
  height: 100%;
}

.login-title {
  height: 300px;
  line-height: 500px;
}

.register-title {
  height: 240px;
  line-height: 375px;
}

.login-title h1,
.register-title h1 {
  text-align: center;
  color: white;
  user-select: none;
  text-shadow: 4px 4px 3px rgba(0, 0, 0, .1);
}

.login-form,
.register-form {
  display: flex;
  flex-direction: column;
  align-items: center;

}

.register-account,
.register-password,
.login-account,
.login-password {
  width: 60%;
  height: 40px;
  margin-bottom: 20px;
  text-indent: 10px;
  /* border: 1px solid #fff; */
  background-color: rgba(255, 255, 255, 0.3);
  /* border-radius: 120px; */
  backdrop-filter: blur(10px);

}

.register-btn,
.login-btn {
  width: 60px;
  position: relative;
  left: 45%;
}

.pword {
  margin-left: 400px;
}

.pword:hover {
  /* text-decoration: underline; */
  cursor: pointer;
}

.success {
  background-color: greenyellow;
}

.fail {
  background-color: red;
}

.alertDemo {
  text-align: center;
}
</style>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #fff5e6 0%, #FFE8D6 100%);
}

.box {
  background: linear-gradient(135deg, #f9b58b 0%, #f49898 100%);
  width: 1050px;
  height: 600px;
  display: flex;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(255, 107, 53, 0.2);
  margin: auto;
  margin-top: 50px;
  transition: all 0.3s ease;
}

.pre-box {
  width: 50%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  height: 600px;
  transition: 0.5s ease-in-out;
  background: linear-gradient(135deg, #f1b793 0%, #f09292 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

.login-form,
.register-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.register-account,
.register-password,
.login-account,
.login-password {
  width: 60%;
  height: 48px;
  margin-bottom: 24px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  border: 2px solid rgba(255, 107, 53, 0.2);
  transition: all 0.3s ease;
  font-size: 16px;
}

.register-btn,
.login-btn {
  width: 120px;
  height: 48px;
  background-color: #FF6B35;
  border-color: #FF6B35;
  color: white;
  font-size: 16px;
  border-radius: 8px;
  position: relative;
  left: 40%;
  transition: all 0.3s ease;
}

/* 保持其他样式不变 */
/* ... */
</style>
